<template>
  <div class="home">
    <div style="width: 100%">
      <h2 style="text-align: center">参与投标</h2>
      <el-table :data="list.data" style="width: 100%">
        <el-table-column align="center" label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column prop="title" label="标的发布名称">
          <template slot-scope="scope">
            <span class="pointer" @click="goToNoticeDetails(scope.row.announcementId)">{{
              scope.row.title
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="bidType" label="状态">
          <template slot-scope="scope">
            {{ bidType(scope.row.bidType) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="endTime"
          label="标的结束时间"
          width="150"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100" prop="title" label="操作">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.bidType != 5"
              @click="signUp(scope.row)"
              type="text"
              >报名</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="list.total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="getList"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getMarkList, signUp } from "@/api/procurement/Mark";
export default {
  data() {
    return {
      list: {},
      currentPage: 1,
      pageSize: 5,
      userRes: {},
    };
  },
  mounted() {
    this.userRes = this.$store.state.user.userRes;
    this.getList();
  },
  methods: {
    bidType(type) {
      if (type == 0) {
        return "报名成功";
      } else if (type == 1) {
        return "已过期";
      } else if (type == 2) {
        return "资质审核";
      } else if (type == 3) {
        return "待开标";
      } else if (type == 4) {
        return "开标结果";
      } else if (type == 5){
        return "未报名";
      }
    },
    // 获取列表
    getList() {
      getMarkList({
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.list = res;
      });
    },
    // 跳转到详情页
    goToNoticeDetails(id) {
      this.$router.push({
        name: "noticeDetails",
        query: {
          listId: id,
        },
      });
    },
    // 发起报名
    signUp(item) {
      signUp({ bidId: item.markId, userId: this.userRes.userId }).then(
        (res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("报名成功");
          } else {
            this.$message.warning(res.msg);
          }
          this.getList();
        }
      );
    },
  },
};
</script>
<style scoped>
>>> .el-pagination {
  float: right;
  margin-top: 20px;
}
</style>
